<template>
  <i-biz-row
    :class="[ns.b(), ns.m(modelData.codeName), ...controller.containerClass]"
    :layout="modelData.layout"
    @click="controller.onClick"
  >
    <template v-for="detail in modelData.deformDetails">
      <i-biz-col
        v-if="!!calcController(detail.id)"
        :layoutPos="calcController(detail.id).model.layoutPos"
        :state="calcController(detail.id).state"
      >
        <i-biz-form-detail-shell
          :key="detail.id"
          :modelData="detail"
          :controller="controller.form"
        ></i-biz-form-detail-shell>
      </i-biz-col>
      <i-biz-form-detail-shell
        v-else
        :key="detail.id"
        :modelData="detail"
        :controller="controller.form"
      />
    </template>
  </i-biz-row>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { useController, useNamespace } from "@/use";
import { FormTabPageController } from "@ibiz-template/runtime";
import { IDEFormTabPage } from "@ibiz/model-core";
import { PropType } from "vue";
const props = defineProps({
  modelData: {
    type: Object as PropType<IDEFormTabPage>,
    required: true,
  },
  controller: {
    type: FormTabPageController,
    required: true,
  },
});

const ns = useNamespace("form-tab-page");

useController(props.controller);

// 计算子项控制器
const calcController = (id?: string) => {
  if (id) {
    const c = props.controller.form.details[id];
    if (c) {
      return c as FormTabPageController;
    }
  }
  return undefined;
};
</script>
<style lang="scss">
@include b(form-tab-page) {
  width: 100%;
  height: 100%;
}
</style>
